<template>
    <div>
      <van-search
        v-model="searchPage.keyword"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="cancel"
      >
      </van-search>

      <van-dropdown-menu>
        <van-dropdown-item v-model="category" :options="optionCategory" @change="onSwitchCategoryChange"/>
        <van-dropdown-item v-model="sort" :options="optionSort" @change="onSwitchSort"/>
        <van-dropdown-item title="筛选" ref="filterDropdown">
          <div class="filterHead">
            标签
          </div>
          <van-checkbox-group v-model="searchPage.tags" direction="horizontal">
            <div v-for="(item, index) in hotTags">
              <van-checkbox :name="item.tags"  class="tags">{{item.tags}} {{item.nums}}</van-checkbox>
            </div>
          </van-checkbox-group>
          <div class="filterFooter">
            <van-button round type="default" plain @click="reset">重置</van-button>
            <van-button round type="info" color="#ff6034" @click="filter">确定</van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>

      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        :offset="10"
        finished-text="没有更多了"
        :immediate-check="false"
        class="shopList"
      >
        <div v-for="item in shopList">
          <van-card
            :desc="item.introduction"
            :title="item.name"
            :thumb="item.iconUrl"
          >
            <div slot="tags">
              <p>{{item.tags}}</p>
            </div>
            <div slot="price" class="price">
              <van-rate :value="item.remarkScore" size="10" readonly />
              <span class="shopRemarkScore">{{item.remarkScore}}</span>
              <span class="shopPersonPrice">{{item.pricePerMan}}/人</span>
            </div>
            <div slot="bottom">
              <p>{{item.address}}<span class="distance">{{item.distance}}</span></p>
            </div>
            <div slot="footer">
              <van-button plain  size="mini" type="primary" @click="toShopIndex(item.id)">进店</van-button>
            </div>
          </van-card>
        </div>
      </van-list>
    </div>
</template>

<script>
    import { Toast } from 'vant';
    import {list} from "@/api/category";
    import {getHotTags} from "@/api/shop";
    import {getUrl} from "@/api/file";
    import {recommend, searchEs} from "@/api/search";
    import {kmFormat} from "@/utils/distance";
    export default {
        name: "index",
        data() {
          return {
            category: 0,
            sort:0,
            screen:0,
            categoryList:[],
            hotTags:[],
            optionCategory: [{text: '全部分类', value: 0}],
            optionSort: [
              {text: '智能排序', value: 0},
              {text: '距离优先', value: 3},
              {text: '好评优先', value: 4},
              {text: '低价优先', value: 1},
              {text: '高价优先', value: 2},
            ],
            optionScreen: [{text: '筛选', value: 0}],
            // 商品相关
            searchPage:{
              page: 1,
              size: 5,
              longitude:"",
              latitude:"",
              categoryId:this.$route.query.selectCategory,
              keyword:this.$route.query.input,
              tags:[],
              orderBy:0
            },
            searchGoodsPage:{
              page: 1,
              size: 5,
              longitude:"",
              latitude:""
            },
            shopList:[],
            totalCount:0,
            loading: false,
            finished: false,

          }
        },
      mounted() {
        if (sessionStorage.getItem('location')){
          let location =JSON.parse(sessionStorage.getItem('location'));
          this.searchPage.longitude=location.longitude;
          this.searchPage.latitude=location.latitude;
          this.loadCategory();
          if(this.$route.query.selectCategory){
            this.category = this.$route.query.selectCategory
          }
          // this.loadHotTags();
          this.onSearch();
        }else{
          Toast("请先选择地理位置");
        }
      },
      methods:{
          initPageAndGetShopList(){
            this.searchPage.page = 1;
            this.shopList = [];
            this.getShopList();
            this.finished = false;
          },
          onSearch(){
            this.initPageAndGetShopList();

          },
          cancel(){
            this.$router.go(-1)
          },
          loadCategory(){
            list().then((response) => {
              this.categoryList= response.data;
              this.categoryList.forEach(category=>{
               this.optionCategory.push({text: category.name, value: category.id})
              })
            });
          },
          loadHotTags(){
            getHotTags({categoryId:this.category}).then((response)=>{
              this.hotTags = response.data;
            })
          },
          onSwitchCategoryChange(detail) {
            this.searchPage.categoryId = detail;
            this.onSearch();
          },
          onSwitchSort(detail){
            this.searchPage.orderBy = detail;
            this.onSearch();
          },
          getShopList(){
            searchEs(this.searchPage).then((response) => {
              let pageBean = response.data.pageBean;
              this.hotTags = response.data.tags;
              if(pageBean.pageList.length===0){
                this.finished = true;
                return;
              }
              pageBean.pageList.forEach(shop=>{
                // 距离计算
                shop.distance=kmFormat(shop.distance);
                // 图片加载
                getUrl(shop.iconUrl).then((response) => {
                  shop.iconUrl = response.data;
                })
              });
              this.shopList=this.shopList.concat(pageBean.pageList);
              this.totalCount = pageBean.totalCount;
              this.loading = false;
            }).catch((response) => {
              console.log(response);
            });
          },
          onLoad(){
            this.searchPage.page++;
            this.getShopList();
          },
          // 标签选择
          onConfirm(){

          },
          // 重置
          reset(){
            this.searchPage.tags=[];
          },
          filter(){
            this.onSearch();
            this.$refs.filterDropdown.toggle();
          },
          toShopIndex: function (shopId) {
            this.$router.push({
              name: 'Shop',
              query: {
                shopId: shopId,
              }
            });
          },
      }
    }
</script>

<style scoped>

  /**商品**/
  .shopList{
    margin-top: 10px;
  }
  .shopRemarkScore{
    color: brown;
    margin-left: 5px;
  }
  .shopPersonPrice{
    margin-left: 10px;
  }
  .distance{
    float: right;
  }
  .tags{
    margin-top: 15px;
    margin-left: 5px;
  }
  .filterHead{
    font-size: 15px;
    font-weight: 100;
    margin-left: 5px;
    margin-top: 10px;
  }
  .filterFooter{
    text-align: center;
  }
  .filterFooter>button{
    width: 150px;
    height: 30px;
    margin: 10px;
  }
</style>
